
  <!DOCTYPE HTML>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  
    <title>Category: vue八宝粥 | Here. There.</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3, minimum-scale=1">
    
    <meta name="author" content="被删">
    
    <meta name="description" content="html5, js, angularjs, jQuery, 前端">
    
    
    
    
    <link rel="alternate" href="/atom.xml" title="Here. There." type="application/atom+xml">
    
    
    <link rel="icon" href="/img/favicon.ico">
    
    
    <link rel="apple-touch-icon" href="/img/pacman.jpg">
    <link rel="apple-touch-icon-precomposed" href="/img/pacman.jpg">
    
    <link rel="stylesheet" href="/css/style.css">
    
<script type="text/javascript">
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "//hm.baidu.com/hm.js?3d902de4a19cf2bf179534ffd2dd7b7f";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

</head>

    <body>
      <header>
        <div>
		
			<div id="imglogo">
				<a href="/"><img src="/img/sun.png" alt="Here. There." title="Here. There."/></a>
			</div>
			
			<div id="textlogo">
				<h1 class="site-name"><a href="/" title="Here. There.">Here. There.</a></h1>
				<h2 class="blog-motto">Love ice cream. Love sunshine. Love life. Love the world. Love myself. Love you.</h2>
			</div>
			<div class="navbar"><a class="navbutton navmobile" href="#" title="菜单">
			</a></div>
			<nav class="animated">
				<ul>
					
						<li><a href="/">首页</a></li>
					
						<li><a href="https://github.com/godbasin/godbasin.github.io">所有文章</a></li>
					
						<li><a href="/archives">归档</a></li>
					
						<li><a href="/categories">分类</a></li>
					
						<li><a href="/about">关于我</a></li>
					
				</ul>
			</nav>			
</div>

      </header>
      <div id="container">
        

<div class="archive-title" >
  <h2 class="category-icon">vue八宝粥</h2>
  
</div>
<div id="main" class="all-list-box clearfix"><!--class: archive-part-->
  <div id="archive-page" class=""><!--class: all-list-box-->

  <section class="post" itemscope itemprop="blogPost">
  
    <a href="/2019/07/11/vue-for-everyone-2/" title="9102全员学Vue--2.怎么三两下拼出一个页面" itemprop="url">
  
    <h1 itemprop="name">9102全员学Vue--2.怎么三两下拼出一个页面</h1>
    
     
       <p itemprop="description" >本节内容主要包括使用Vue框架过程中需要掌握的一些基本概念，以及怎么使用现有的一些开源库和组件快速创建项目。另外再附赠对状态管理、数据传递的一些方法和理解叭。总而言之，这一节开始会是与Vue紧密相关的内容啦。</p>
      
    
    <time datetime="2019-07-11T15:09:51.000Z" itemprop="datePublished">2019-07-11</time>
  </a>
</section>

  <section class="post" itemscope itemprop="blogPost">
  
    <a href="/2019/06/27/vue-for-everyone-1/" title="9102全员学Vue--1.如何理解前端和Vue" itemprop="url">
  
    <h1 itemprop="name">9102全员学Vue--1.如何理解前端和Vue</h1>
    
     
       <p itemprop="description" >最近身边学习 Vue 的人也越来越多了，大家都有很多的疑问，为什么前端要用框架、Vue 做了些什么、要怎么上手，等等。距离上一次写 Vue 也过去三年了，是时候再把这三年自己的理解再整理进去了。由于这个系列主要是希望写给可能前端掌握也不深的人，所以会铺垫一些自己认为需要的内容，本</p>
      
    
    <time datetime="2019-06-27T15:09:59.000Z" itemprop="datePublished">2019-06-27</time>
  </a>
</section>

  <section class="post" itemscope itemprop="blogPost">
  
    <a href="/2018/03/31/vue2-transition-5-list-and-flip/" title="Vue2动画5--FLIP与列表过渡" itemprop="url">
  
    <h1 itemprop="name">Vue2动画5--FLIP与列表过渡</h1>
    
     
       <p itemprop="description" >最近在捣鼓 Vue 动画的内容，《Vue2 动画》系列用于记录一些使用方法、demo 以及原理分析。本文讲述 Vue 中列表的过渡，以及介绍下 FLIP。</p>
      
    
    <time datetime="2018-03-31T12:27:57.000Z" itemprop="datePublished">2018-03-31</time>
  </a>
</section>

  <section class="post" itemscope itemprop="blogPost">
  
    <a href="/2018/03/25/vue2-transition-4-multi-element/" title="Vue2动画4--多元素/组件过渡" itemprop="url">
  
    <h1 itemprop="name">Vue2动画4--多元素/组件过渡</h1>
    
     
       <p itemprop="description" >最近在捣鼓Vue动画的内容，《Vue2 动画》系列用于记录一些使用方法、demo 以及原理分析。本文介绍 Vue 中多个元素或是组件的过渡效果。</p>
      
    
    <time datetime="2018-03-25T06:37:59.000Z" itemprop="datePublished">2018-03-25</time>
  </a>
</section>

  <section class="post" itemscope itemprop="blogPost">
  
    <a href="/2018/03/18/vue2-transition-3-javascript-hook/" title="Vue2动画3--Javascript钩子" itemprop="url">
  
    <h1 itemprop="name">Vue2动画3--Javascript钩子</h1>
    
     
       <p itemprop="description" >最近在捣鼓 Vue 动画的内容，《Vue2 动画》系列用于记录一些使用方法、demo 以及原理分析。本文介绍使用 Javascript 钩子来实现动画效果的过程。</p>
      
    
    <time datetime="2018-03-18T09:05:46.000Z" itemprop="datePublished">2018-03-18</time>
  </a>
</section>

  <section class="post" itemscope itemprop="blogPost">
  
    <a href="/2018/03/17/vue2-transition-2-css-transition-animation/" title="Vue2动画2--CSS过渡与动画" itemprop="url">
  
    <h1 itemprop="name">Vue2动画2--CSS过渡与动画</h1>
    
     
       <p itemprop="description" >最近在捣鼓Vue动画的内容，《Vue2 动画》系列用于记录一些使用方法、demo以及原理分析。本文在 Vue 中使用 CSS 过渡、 CSS 动画的方式来实现动画效果。</p>
      
    
    <time datetime="2018-03-17T03:15:38.000Z" itemprop="datePublished">2018-03-17</time>
  </a>
</section>

  <section class="post" itemscope itemprop="blogPost">
  
    <a href="/2018/03/11/vue2-transition-1-transition-component/" title="Vue2动画1--transition组件" itemprop="url">
  
    <h1 itemprop="name">Vue2动画1--transition组件</h1>
    
     
       <p itemprop="description" >最近在捣鼓Vue动画的内容，《Vue2 动画》系列用于记录一些使用方法、demo以及原理分析。本文介绍 transition 组件，和创建简单 demo 的过程。</p>
      
    
    <time datetime="2018-03-11T07:53:30.000Z" itemprop="datePublished">2018-03-11</time>
  </a>
</section>

  <section class="post" itemscope itemprop="blogPost">
  
    <a href="/2018/01/28/vue2-notes-17-lazyload-chunk/" title="Vue2使用笔记17--路由懒加载" itemprop="url">
  
    <h1 itemprop="name">Vue2使用笔记17--路由懒加载</h1>
    
     
       <p itemprop="description" >最近在使用 Vue2 作为项目中前端的框架，《Vue2 使用笔记》系列用于记录过程中的一些使用和解决方法。本文记录配置路由懒加载，分块打包文件的过程。</p>
      
    
    <time datetime="2018-01-28T06:06:30.000Z" itemprop="datePublished">2018-01-28</time>
  </a>
</section>

  <section class="post" itemscope itemprop="blogPost">
  
    <a href="/2018/01/27/vue2-notes-16-custom-directive/" title="Vue2使用笔记16--自定义指令" itemprop="url">
  
    <h1 itemprop="name">Vue2使用笔记16--自定义指令</h1>
    
     
       <p itemprop="description" >最近在使用 Vue2 作为项目中前端的框架，《Vue2 使用笔记》系列用于记录过程中的一些使用和解决方法。本文记录开发自定义指令的过程。</p>
      
    
    <time datetime="2018-01-26T16:02:07.000Z" itemprop="datePublished">2018-01-27</time>
  </a>
</section>

  <section class="post" itemscope itemprop="blogPost">
  
    <a href="/2018/01/21/vue2-notes-15-custom-v-model/" title="Vue2使用笔记15--自定义的表单组件" itemprop="url">
  
    <h1 itemprop="name">Vue2使用笔记15--自定义的表单组件</h1>
    
     
       <p itemprop="description" >最近在使用 Vue2 作为项目中前端的框架，《Vue2 使用笔记》系列用于记录过程中的一些使用和解决方法。本文记录封装自定义的表单组件的过程。</p>
      
    
    <time datetime="2018-01-20T16:05:12.000Z" itemprop="datePublished">2018-01-21</time>
  </a>
</section>

  <section class="post" itemscope itemprop="blogPost">
  
    <a href="/2018/01/20/vue2-notes-14-sealed-component/" title="Vue2使用笔记14--Datetimepicker组件封装" itemprop="url">
  
    <h1 itemprop="name">Vue2使用笔记14--Datetimepicker组件封装</h1>
    
     
       <p itemprop="description" >最近在使用 Vue2 作为项目中前端的框架，《Vue2 使用笔记》系列用于记录过程中的一些使用和解决方法。本文记录简单封装组件的过程。</p>
      
    
    <time datetime="2018-01-20T15:01:37.000Z" itemprop="datePublished">2018-01-20</time>
  </a>
</section>

  <section class="post" itemscope itemprop="blogPost">
  
    <a href="/2018/01/14/vue2-notes-13-dialog-component/" title="Vue2使用笔记13--添加Promise弹窗" itemprop="url">
  
    <h1 itemprop="name">Vue2使用笔记13--添加Promise弹窗</h1>
    
     
       <p itemprop="description" >最近在使用 Vue2 作为项目中前端的框架，《Vue2 使用笔记》系列用于记录过程中的一些使用和解决方法。本文记录添加 Promise 弹窗的过程。</p>
      
    
    <time datetime="2018-01-14T06:47:03.000Z" itemprop="datePublished">2018-01-14</time>
  </a>
</section>

  <section class="post" itemscope itemprop="blogPost">
  
    <a href="/2018/01/13/vue2-notes-12-use-vuex/" title="Vue2使用笔记12--使用vuex" itemprop="url">
  
    <h1 itemprop="name">Vue2使用笔记12--使用vuex</h1>
    
     
       <p itemprop="description" >最近在使用 Vue2 作为项目中前端的框架，《Vue2 使用笔记》系列用于记录过程中的一些使用和解决方法。本文记录使用 vuex，并进行登录检测的过程。</p>
      
    
    <time datetime="2018-01-12T16:01:46.000Z" itemprop="datePublished">2018-01-13</time>
  </a>
</section>

  <section class="post" itemscope itemprop="blogPost">
  
    <a href="/2018/01/07/vue2-notes-11-access-menu/" title="Vue2使用笔记11--菜单鉴权" itemprop="url">
  
    <h1 itemprop="name">Vue2使用笔记11--菜单鉴权</h1>
    
     
       <p itemprop="description" >最近在使用 Vue2 作为项目中前端的框架，《Vue2 使用笔记》系列用于记录过程中的一些使用和解决方法。本文记录将路由与菜单结合，对部分菜单不显示的逻辑实现。</p>
      
    
    <time datetime="2018-01-06T16:12:15.000Z" itemprop="datePublished">2018-01-07</time>
  </a>
</section>

  <section class="post" itemscope itemprop="blogPost">
  
    <a href="/2018/01/06/vue2-notes-10-access-route/" title="Vue2使用笔记10--路由鉴权" itemprop="url">
  
    <h1 itemprop="name">Vue2使用笔记10--路由鉴权</h1>
    
     
       <p itemprop="description" >最近在使用 Vue2 作为项目中前端的框架，《Vue2 使用笔记》系列用于记录过程中的一些使用和解决方法。本文记录给路由添加鉴权的过程。</p>
      
    
    <time datetime="2018-01-05T16:03:42.000Z" itemprop="datePublished">2018-01-06</time>
  </a>
</section>


  <nav id="page-nav" class="clearfix archive-nav">
    <span class="page-number current">1</span><a class="page-number" href="/categories/vue八宝粥/page/2/">2</a><a class="extend next" rel="next" href="/categories/vue八宝粥/page/2/">Next &raquo;</a>
  </nav>

  </div>
</div>

      </div>
      <footer><div id="footer" >
	
	<section class="info">
		<p> 即使梦想再小，却很伟大 ^_^ </p>
	</section>
	 
		<p class="copyright">Powered by <a href="http://hexo.io" target="_blank" title="hexo">hexo</a> and Theme by <a href="https://github.com/A-limon/pacman" target="_blank" title="Pacman">Pacman</a> © 2019 
		
		<a href="https://godbasin.github.io" target="_blank" title="被删">被删</a>
		
		</p>
</div>
</footer>
      <script src="/js/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ 
  $('.navbar').click(function(){
    $('header nav').toggleClass('shownav');
  });
  var myWidth = 0;
  function getSize(){
    if( typeof( window.innerWidth ) == 'number' ) {
      myWidth = window.innerWidth;
    } else if( document.documentElement && document.documentElement.clientWidth) {
      myWidth = document.documentElement.clientWidth;
    };
  };
  var m = $('#main'),
      a = $('#asidepart'),
      c = $('.closeaside'),
      o = $('.openaside');
  $(window).resize(function(){
    getSize(); 
    if (myWidth >= 1024) {
      $('header nav').removeClass('shownav');
    }else
    {
      m.removeClass('moveMain');
      a.css('display', 'block').removeClass('fadeOut');
      o.css('display', 'none');
        
    }
  });
  c.click(function(){
    a.addClass('fadeOut').css('display', 'none');
    o.css('display', 'block').addClass('fadeIn');
    m.addClass('moveMain');
  });
  o.click(function(){
    o.css('display', 'none').removeClass('beforeFadeIn');
    a.css('display', 'block').removeClass('fadeOut').addClass('fadeIn');      
    m.removeClass('moveMain');
  });
  $(window).scroll(function(){
    o.css("top",Math.max(80,260-$(this).scrollTop()));
  });
});
</script>







    </body>
   </html>
